<template>
  <div class="content_box">
    <div class="content">
      <ul class="daohang">
        <li>全城</li>
        <li>品牌</li>
        <li>特色</li>
      </ul>
      <hr/>
      <ul class="ul_film">
        <li v-for="i in film" :key="i.id">
          <div class="nm_price"><span class="i_nm">{{ i.nm }}</span>
            <span class="i_price1">{{ i.sellPrice }}</span><span class="i_price2">元起</span></div>
          <div class="i_addr">{{ i.addr }}</div>
          <div><span v-for="item in i.labels" :key="item.id" class="item_name">{{ item.name }}</span></div>
          <div class="i_card" v-show="i.promotion.cardPromotionTag==''"></div>
          <div class="i_card" v-show="i.promotion.cardPromotionTag!=''"><span>卡</span>{{ i.promotion.cardPromotionTag }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "yingyuan",
  data() {
    return {
      film: [],
    };
  },
  mounted() {
    axios.get("/ajax/moreCinemas?movieId=0&day=2021-12-09&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1639031107413&cityId=99&optimus_uuid=6D9D0ED0533E11ECAE29CD86D772C36E9D85A47644554FF78A1F6C2AD908254C&optimus_risk_level=71&optimus_code=10").then((res) => {
      console.log(res);
      this.film = res.data.cinemas.cinemas;
      console.log("影院", this.film);
    })
  },
}
</script>

<style scoped>
ul li {

}

.daohang {
  width: 100%;
  height: 1.067rem;
  line-height: 1.067rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.daohang li {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  font-size: 0.347rem;
  color: gray;
}

.i_nm {
  font-weight: bold;
  font-size: 0.453rem;
}

.i_price1 {

  font-size: 0.533rem;
}
.i_price1,.i_price2{
  font-weight: bold;
  color: red;
}
.i_addr {
  color: gray;
  font-size: 0.4rem;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ul_film li {
  /*width: 100%;*/
  height: 2.667rem;
  text-align: left;
  display: inline-block;
  width: 100%;
  /*height: auto;*/
  border-bottom: 1px solid gray;
  margin-left: 0.4rem;
  padding: 0.347rem 0.4rem 0.347rem;
}

.nm_price {
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.item_name {
  display: inline-block;
  width: auto;
  border: 1px solid #589daf;
  margin-right: 4px;
  text-align: center;
  color: #589daf;
  font-size: 0.373rem;
  padding-left: 4px;
  padding-right: 4px;
}

.i_card {
  font-size: 0.4rem;
  margin-top: 4px;
  color: gray;
}

.i_card span {
  display: inline-block;
  width: auto;
  height: auto;
  background: #21c8f9;
  padding-right: 4px;
  color: white;
}
</style>